<template>
  <div>
    <el-row style="float:left;margin-left: 64px;">
      <el-button icon="el-icon-plus" type="primary" @click="dialogFormVisible=true">添加缺陷类型</el-button>
    </el-row>
    <el-table :data="tableData" style="width: 1000px;margin: auto;">
      <el-table-column label="缺陷编号" prop="qid"></el-table-column>
      <el-table-column prop="qxtype" label="缺陷类型名称">
      </el-table-column>

      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-switch  @change="changeStatus($event,scope.row,scope.$index)" v-model="scope.row.isstatus" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
            :inactive-value="0"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="pager" @prev-click="pager" @next-click="pager" background layout="prev,pager,next,total,jumper"
      :total="total" :page-size="
      size"></el-pagination>
    <el-dialog title="添加缺陷类型" :visible.sync="dialogFormVisible" width="40%" style="text-align: center;">
      <el-form>
        <el-form-item label="缺陷类型名称:">
          <el-input v-model="form1.qxtype" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="状态:">
          <el-radio :label="1" v-model="form1.isstatus">启用</el-radio>
          <el-radio :label="0" v-model="form1.isstatus">不启用</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="addxz()">确 定</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">返回</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    data() {
      return {

        tableData: [],
        // 对话框
        dialogFormVisible: false,
        //表格里面修改按钮 出现对话框
        hanFormupdate: false,
        size: 5,
        total: 0,
        form1: {
          qid: '',
          qxtype: '',

          isstatus: 1
        },


      }

    },
    methods: {
      getDate: function(pageNo, pageSize) {
        let postData = this.$qs.stringify({
          pageNo: 1,
          pageSize: this.size
        })
        axios.post("http:localhost:8086/quexian/all", postData).then(vs => {
          this.tableData = vs.data.list
          this.total = vs.data.total
        })
      },
      pager: function() {

      },
      addxz: function() {

        axios.post("http:localhost:8086/quexian/add", this.form1).then(vs => {
          if (vs.status = 200) {
            if (vs.data) {
              this.$message('添加成功')
              this.getDate(1)
              this.dialogFormVisible = false
              this.form1={}
              this.form1.isstatus=1
            } else {
              this.$message('添加失败已有该缺陷类型')
            }
          }
        })
      },
      handleDelete:function(index,row){
        let postDate=this.$qs.stringify({
          qid:row.qid
        })
        axios.post("http:localhost:8086/quexian/del",postDate).then(vs=>{
          if(vs.status==200){
            this.$message('删除成功')
            this.getDate(1)
          }
        })
        console.log(row)
      },
      changeStatus:function(data,b,index){
      console.log(b)
      this.form1=b
      axios.post('http:localhost:8086/quexian/update',this.form1).then(vs=>{
       this.getDate(1)
       this.form1={}
       this.form1.isstatus=1
      })
      }
    },
    created() {
      this.getDate()
    }

  }
</script>

<style scoped="scoped">

</style>
